<template>
  <div class="boxTitle boxMargin">
    <div class="title ">
      <!--<h1 style="">MARKET APPLICATIONS</h1>-->
      <h2>{{pageData.solvePlanBase.appMarket}}</h2>
    </div>
  </div>

  <div class="marketList"  :class="{'pageEN': curLocale == 'en', 'pageZH': curLocale == 'zh'}">
    <div
      class="item case1"
      v-for="item in pageData.appMarketLists"
      :style="{ 'background': 'url(' + item.imgUrl + ')'}"
      style="background-size: 100% 100%;"
      >
      <div class="title" v-html="item.title"></div>
      <div class="text">{{item.descrip}}</div>
    </div>
  </div>

</template>

<script setup>
  import {ref, computed} from 'vue'
  import {useLocaleStore} from '@/store/locales.js'
  const curLocale = computed(() => {		// 定义计算属性
    const useLocale = useLocaleStore()
    return useLocale.locale
  })


  const props = defineProps({
    pageData: {
      type: Object,
      default: () => {
      },
    }
  })
</script>

<style scoped lang="scss">
  @media screen and (max-width: 1079px) {
    .boxMargin {
      margin-top: 10px;
    }

    .marketList {
      display: flex; flex-wrap: wrap;

      &.pageEN{
        .item {
          .title {
            line-height: 20px;
          }
          .text {
            line-height: 18px;
          }
        }
      }

      .item {
        width: calc( 50% - 5px );
        padding: 10px; box-sizing: border-box; margin-top: 10px;
        &:nth-child(2n){
          margin-left: 5px;
        }
        &:nth-child(2n+1){
          margin-right: 5px;
        }
        .title {
          font-size: 16px;
          color: #fff;
          font-weight: bold; line-height: 24px;
          border-bottom: 2px solid #fff;
          // width: 30px;
          // white-space: nowrap;
        }
        .text {
          font-size: 14px;
          color: #fff;
          padding-top: 2.4vw;
          line-height: 22px;
        }
      }
    }
  }

  @media screen and (min-width: 1080px) {
    .boxMargin {
      margin-top: 3vw;
    }

    .marketList {
      display: flex;
      gap: 1vw;

      &.pageEN{
        .item {
          .title {
            font-size: 1.2vw;
          }
          .text {
            padding-top: 1.8vw;
            line-height: 1.5vw;
          }
        }
      }

      .item {
        flex: 1;
        padding: 1.5vw; box-sizing: border-box;

        transition: all 0.5s;
        &:hover{
          transform: translateY(-1vw);
        }

        .title {
          font-size: 1.3vw;
          color: #fff;
          font-weight: bold;
          border-bottom: 0.2vw solid #fff; display: inline-block;
           // white-space: nowrap; overflow: hidden; display: inline-block;
        }
        .text {
          font-size: 0.8vw;
          color: #fff;
          padding-top: 2.4vw;
          line-height: 1.7vw;
        }
      }
    }
  }
</style>
